<template>
	<view class="container">
		<fui-navigation-bar splitLine @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" title="NavBar自定义导航栏" backgroundColor="#fff" color="#333">
		</fui-navigation-bar>
		<view class="fui-header-bg"><image src="https://fui-1255369109.cos.ap-nanjing.myqcloud.com/static/images/my/mine_bg_3x.png" class="fui-header-img"></image></view>
		<view class="header">
			<view class="title">NavBar</view>
			<view class="sub-title">自定义导航栏：默认固定在顶部，可设置渐变</view>
		</view>
		<view class="fui-title">非沉浸式</view>
		<fui-navigation-bar backgroundColor="#fff" :isFixed="false" :isOpacity="false" :isImmersive="false">
			<view class="fui-content-box">
				<view class="fui-avatar-box" ><image src="https://fui-1255369109.cos.ap-nanjing.myqcloud.com/static/images/news/2.jpg" class="fui-avatar"></image></view>
				<view class="fui-search-box" >
					<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
					<view class="fui-search-text">请输入搜索关键字</view>
				</view>
				<view class="fui-notice-box">
					<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
					<fui-badge type="danger" absolute :scaleRatio="0.8" top="-4rpx">1</fui-badge>
				</view>
			</view>
		</fui-navigation-bar>

		<view class="fui-title">沉浸式(多出的空白区域为状态栏高度)</view>
		<fui-navigation-bar backgroundColor="#fff" :isFixed="false" :isOpacity="false">
			<view class="fui-content-box">
				<view class="fui-avatar-box"><image src="https://fui-1255369109.cos.ap-nanjing.myqcloud.com/static/images/news/2.jpg" class="fui-avatar"></image></view>
				<view class="fui-search-box">
					<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
					<view class="fui-search-text">请输入搜索关键字</view>
				</view>
				<view class="fui-notice-box">
					<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
					<fui-badge type="danger" absolute :scaleRatio="0.8" top="-4rpx">1</fui-badge>
				</view>
			</view>
		</fui-navigation-bar>

		<view class="fui-title">换背景色</view>
		<fui-navigation-bar backgroundColor="#EB0909" :isFixed="false" :isOpacity="false" :isImmersive="false">
			<view class="fui-content-box">
				<view class="fui-avatar-box"><image src="https://fui-1255369109.cos.ap-nanjing.myqcloud.com/static/images/news/2.jpg" class="fui-avatar"></image></view>
				<view class="fui-search-box fui-bg-white">
					<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
					<view class="fui-search-text">请输入搜索关键字</view>
				</view>
				<view class="fui-notice-box">
					<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
					<fui-badge type="white_red" absolute :scaleRatio="0.8" top="-4rpx">1</fui-badge>
				</view>
			</view>
		</fui-navigation-bar>

		<view style="height: 800px"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			top: 0, //标题图标距离顶部距离
			opacity: 0,
			scrollTop: 0.5
		};
	},
	onLoad() {
		
	},
	methods: {
		initNavigation(e) {
			this.opacity = e.opacity;
			this.top = e.top;
		},
		opacityChange(e) {
			this.opacity = e.opacity;
		},
		back() {
			uni.navigateBack();
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style>
.container {
	padding-bottom: 120rpx;
	box-sizing: border-box;
}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}
.fui-title {
	width: 100%;
	padding: 50rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-weight: bold;
}
.fui-header-bg {
	width: 100%;
	margin: 0;
}
.fui-header-img {
	width: 100%;
	height: 440rpx;
	display: block;
}
.fui-header-icon {
	width: 100%;
	position: fixed;
	top: 0;
	padding: 0 12rpx;
	display: flex;
	align-items: center;
	height: 32px;
	transform: translateZ(0);
	z-index: 99999;
	box-sizing: border-box;
}

.fui-content-box {
	width: 100%;
	height: 44px;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.fui-avatar-box {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #eaeef1;
	flex-shrink: 0;
}
.fui-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.fui-search-box {
	width: 100%;
	height: 32px;
	margin: 0 28rpx;
	border-radius: 18px;
	font-size: 14px;
	background-color: #f1f1f1;
	padding: 0 12px;
	box-sizing: border-box;
	color: #bfbfbf;
	display: flex;
	align-items: center;
}

.fui-bg-white {
	background-color: #ffffff !important;
}
.fui-search-text {
	padding-left: 10rpx;
}

.fui-notice-box {
	position: relative;
	flex-shrink: 0;
	font-size: 44rpx;
	color: #fff;
}
</style>
